<!--
 * @Author: your name
 * @Date: 2020-07-28 11:43:28
 * @LastEditTime: 2020-08-11 10:10:37
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /website/src/components/LeftSideBar.vue
--> 
<template>
  <div class="page-sideBar">
    <h2>{{title}}</h2>
    <div class="item">
      <slot name="currentTitle"></slot>
      <!-- <p>企业公告</p>
      <p>公司新闻</p>
      <p>行业新闻</p> -->
    </div>
    <p class="sidebar-item">
      <img src="/images/n_map.png" alt="">
    </p>
    <p class="sidebar-item">
      <img src="/images/QQ.png" alt="">
    </p>
    <p class="sidebar-item">
      <img src="/images/n_contact.jpg" alt="">
    </p>
    <div class="sidebar-item">
      <p>联系电话: {{contact.mobile}}</p>
      <p>联系手机：{{contact.phone}}</p>
      <p>邮箱：{{contact.advisory}}</p>
      <p>邮编: {{contact.postcode}}</p>
      <p>地址：{{contact.address}}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LeftSideBar',
  props: {
    title: {
      type: String,
      default: ''
    },
    contact: {
      type: Object,
      default: () => {}
    }
  }
}
</script>

<style lang="scss" scoped>
  .page-sideBar{
    width: 240px;
    h2{
      width: 100%;
      text-align: center;
      padding: 30px 0;
      background-color: #01a2ff;
      color: #fff;
    }
    .item{
      margin: 1px 0 10px 0;
      p{
        font-size: 15px;
        padding: 20px 0;
        text-align: center;
        border-bottom: 1px dotted #ccc;
        &:hover{
          background-color: #01a2ff;
          color: #fff;
        }
      }
    }
    .sidebar-item{
      margin: 10px 0;
      font-size: 14px;
      color: #777;
      p{
        margin-bottom: 5px;
      }
    }
  }
</style>